<template>
	<view class="content">
		<cu-custom :noDiv="false" :isBack="true">
		    <block slot="content" style="color: #FFFFFF;font-size: 20px;">活动规则</block>
		</cu-custom>
		<view class="img-content">
			<image 
			mode="scaleToFill"
			class="img-one"
			src="../../static/img/img_article_how_to_activate_01@3x.png" alt=""/>
			<image 
			class="img-two"
			src="../../static/img/img_article_how_to_activate_02@3x.png" alt=""/>
				
			<video 
				id="myVideo" 
				class="video"
				src="https://putao-uploader.oss-cn-hangzhou.aliyuncs.com/tuiguangdashi/%E6%BF%80%E6%B4%BB%E6%95%99%E7%A8%8B%E5%90%88%E6%88%902.mp4"
				:danmu-list="danmuList" 
				enable-danmu 
				controls
			/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		font-size: 0;
		.img-content{
			position: relative;
			margin-top: -2rpx;
			padding-bottom: 40rpx;
			.img-one{
				width: 100vw;
				height: 860rpx;
				display: inline-block;
			}
			.img-two{
				width: 100vw;
				height: 680rpx;
			}
			.video{
				width: 622rpx;
				height: 352rpx;
				border-radius: 16rpx;
				position: absolute;
				top: 1160rpx;
				left: calc(50vw - 311rpx);
				z-index: 10;
			}
		}
	}
</style>
